<template>
   <div>
	   <!--面包屑区域-->
	   <el-breadcrumb separator-class="el-icon-arrow-right">
	     <el-breadcrumb-item :to="{ path: '/adminHome/center' }">首页</el-breadcrumb-item>
	     <el-breadcrumb-item>会员管理</el-breadcrumb-item>
	     <el-breadcrumb-item>会员列表</el-breadcrumb-item>
	   </el-breadcrumb>
	   <!--卡片视图-->
	   <el-card >
		   <el-row :gutter="20">
		   <!-- <el-col :span="7" >
				<el-input placeholder="请输入内容">
				<el-button slot="append" icon="el-icon-search"></el-button>
				</el-input>
			</el-col> -->
			<el-col :span="4">
				<el-button type="primary" @click="dialogVisible = true">添加会员信息</el-button>
			</el-col>
			<el-col :span="4">
				<el-button type="primary" @click="listmembers">会员信息列表</el-button>
			</el-col>
			
			</el-row>
	   </el-card>
	   <!--表格-->
	     <el-table
	       :data="tableData"
	       style="width: 100%"
	       max-height="250">
	       <el-table-column
	         fixed
	         prop="memberID"
	         label="会员编号"
	         width="240">
	       </el-table-column>
	       <el-table-column
	         prop="memberName"
	         label="会员姓名"
	         width="200">
	       </el-table-column>
	       <el-table-column
	         prop="memberPhoneNumber"
	         label="手机号"
	         width="240">
	       </el-table-column>
	       <el-table-column
	         prop="points"
	         label="积分"
	         width="240">
	       </el-table-column>
	       <el-table-column
	         fixed="right"
	         label="操作"
	         width="100">
	         <template slot-scope="scope">
	           <el-button
	            @click="deleteRow(scope.row.memberID)"
	             type="text"
	             size="small">
	             移除
	           </el-button>
	         </template>
	       </el-table-column>
	     </el-table>
	   <!--文本框-->
	   <el-dialog
	     title="添加会员信息"
	     :visible.sync="dialogVisible"
	     width="40%"
	     :before-close="handleClose">
		 <el-form :label-position="labelPosition" label-width="80px" :model="form">
		   <!-- <el-form-item label="会员编号" prop="memberID">
		     <el-input v-model="form.memberID"></el-input>
		   </el-form-item> -->
		   <el-form-item label="会员姓名" prop="memberName">
				 <el-input v-model="form.memberName"></el-input>
		   </el-form-item>
		   <el-form-item label="手机号" prop="memberPhoneNumber">
		     <el-input v-model="form.memberPhoneNumber"></el-input>
		   </el-form-item>
		   <el-form-item label="积分" prop="points">
		     <el-input v-model="form.points"></el-input>
		   </el-form-item>
		 </el-form>
	     <span></span>
	     <span slot="footer" class="dialog-footer">
	       <el-button @click="dialogVisible = false">取 消</el-button>
	       <el-button type="primary" @click="addDataToTable">确 定</el-button>
	     </span>
	   </el-dialog>
	   
   </div>
   
</template>
<script>
	export default{
		methods: {
			
			listmembers() {
			      this.axios.post('MembersList', {})
			     .then(response => {
					this.tableData=response.data.data.list;
			      })
			     .catch(error => {
			        console.error(error);
			      });
			},
			
		      deleteRow(id) {
		        this.axios.get("MembersRemove",{
		            params: {
		              memberID: id
		            }
		          })
		        .then(
		        	response=>{
		        		this.listmembers();
		        		console.log(response.data);
		        			this.$message.success('删除成功'); 
		        	}
		        )
		        .catch(error => {
		           console.error(error);
		         });
				},
				
			  addDataToTable() {  
			       this.axios.post('MembersAdd', this.form)
			       			
			       .then(response => {
					   
			          if (response.data.code === 200) {
			          	this.$message({
			          	  message: response.data.message,  
			          	  type: 'success'  
			          	});  
			          }else{
			          	this.$message({
			          	  message: response.data.message,  
			          	  type: 'warning' 
			          	  });  
			          }
					  
			        })
					
			       	.catch(error => {
			       	        console.error(error);  
			       	        this.$message({  
			       	        message: error.response.data.message,  
			       	        type: 'error'  
			       	        });  
			       	    });  
				},  
		    },
		data(){
			return {
			        goods: 5,
					dialogVisible:false,
					labelPosition: 'right',
					
			        form:{
						memberID: '',  
						memberPhoneNumber: '', 
						points: '',  
						memberName: ''
			        },
					
					rules:{  
					        // ... 其他验证规则 ...  
					        phone: [  
					          { required: true, message: '请输入手机号', trigger: 'blur' },  
					          { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }  
					        ],  
					},  
					tableData:[]
			      };
		},
			
	}
</script>

<style lang ="less" scoped>


</style>